<script setup lang="ts">
import {Delete, Edit, InfoFilled} from "@element-plus/icons-vue";
import {formattedDate} from "@/utils/formatDate.ts";
import {addAdminAPI, deleteAdminAPI, getAdminAPI} from "@/api/destribute.ts";
import {getRoleAPI} from "@/api/permission.ts";
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElNotification} from "element-plus";

const dialogAddAdminVisible = ref(false)

// 获取管理员列表
const adminList = ref()
const getAdminList = async () => {
  const res = await getAdminAPI()
  if (res.code === 0) {
    adminList.value = res.data
  }
}

// 获取角色列表
const roleList = ref()
const getRoleList = async () => {
  const res = await getRoleAPI('1')
  roleList.value = res.data
  dialogAddAdminVisible.value = false
}

// 添加管理员
const adminForm = reactive({
  name: '',
  password: '',
  phone: '',
  role: '',
  code: ''
})
const addAdmin = async () => {
  const res = await addAdminAPI(adminForm)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    await getAdminList()
  }
}

// 编辑管理员
const EditAdministrator = () => {
  ElNotification({
    title: 'Warning',
    message: '为减缓服务器压力，暂关闭编辑接口及数据回显',
    type: 'warning',
  })
}

// 删除管理员
const deleteAdministrator = async (id) => {
  const res = await deleteAdminAPI(id)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    await getAdminList()
  }
}

onMounted(() => {
  Promise.all([getAdminList(), getRoleList()])
})
</script>

<template>
  <el-card class="box-card">
    <div class="card-coach-title">
      <el-button type="primary" @click="dialogAddAdminVisible = true">添加管理员</el-button>
    </div>
    <div class="card-coach-table">
      <el-table
          border
          class="el-table-box"
          ref="multipleTableRef"
          :data="adminList"
          style="width: 100%"
      >
        <el-table-column label="#" width="60" align="center" type="index"/>
        <el-table-column prop="name" align="center" label="名称" width="80"/>
        <el-table-column prop="phone" align="center" label="手机号" width="200"/>
        <el-table-column align="center" label="角色" width="200">
          <template #default="{row}">
            {{ row.role.name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="200">
          <template #default="{row}">
            {{ formattedDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="控制">
          <template #default="{row}">
            <div class="operator-btn">
              <el-button type="primary" size="default" :icon="Edit as any" @click="EditAdministrator" circle/>
              <el-popconfirm
                  width="200"
                  @confirm="deleteAdministrator(row._id)"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="InfoFilled as any"
                  icon-color="#f36b6c"
                  title="您确定删除此管理员吗?"
              >
                <template #reference>
                  <el-button type="danger" size="default" :icon="Delete as any" circle/>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>

  <el-dialog :close-on-click-modal="false" v-model="dialogAddAdminVisible" title="添加管理员">
    <el-form
        :model="adminForm"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="adminForm.name" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="adminForm.password" type="password" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="adminForm.phone" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="adminForm.role">
          <el-option v-for="item in roleList" :label="item.name" :value="item._id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <div class="row">
          <el-input v-model="adminForm.code"/>
          <el-button type="primary" style="margin-left: 20px" @click="adminForm.code = '123456'">获取验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogAddAdminVisible = false">取消</el-button>
      <el-button type="primary" @click="addAdmin">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.box-card {
  padding: 0 50px;

  .card-coach-title {
    height: 35px;
    display: flex;
    justify-content: flex-end;
  }

  .card-coach-table {
    margin-top: 20px;

    .el-table-box {
      height: calc(90vh - 140px);
    }
  }
}
</style>